// 低部组件
<template>
  <div class="todo-footer" v-show="total">
      <label>
          <!-- <input type="checkbox" :checked="isAll" @change="CheckAll"> -->
          <input type="checkbox" v-model="isAll">
      </label>
      <span>
          <span>已完成{{donetotal}}</span> / 全部 {{total}}
      </span>
      <button class="btn btn-danger" @click="clearFinsh">清除已完成任务</button>
  </div>
</template>

<script>
export default {
    name:'TodoFooter',
    props:['todos'],   //'checkAllTodo','clearAllTodo'
    computed:{
        // 总共
        total(){
            return this.todos.length
        },
        // 已完成的数量
        donetotal(){
            // 可以使用数组上的一个reduce函数方法，返回数组计算后的总和
            // reduce两个参数pre：上一个数组的返回值,当前数组的返回值
            // const x = this.todos.reduce((pre,current)=>{
            //     return pre + (current.done ? 1:0)  //判断当前数组对应的dong值是否为真 是返回1 不是返回0
            // },0)  //从0开始计算  x得到值是最后一个数组的返回值

            // 简写形式
            return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0),0)
        },
        // 
        isAll:{
            get(){
                return this.donetotal === this.total && this.total > 0
            },

            set(value){
                // this.checkAllTodo(value)
                this.$emit('checkAllTodo',value)
            }
            
        }
    },
    methods: {
        CheckAll(e){
            // console.log(e.target.value)
            // this.checkAllTodo(e.target.checked)
            this.$emit('checkAllTodo',e.target.checked)
        },
        clearFinsh(){
            if(confirm('是否确认删除？'))
            {
                // this.clearAllTodo()
                this.$emit('clearAllTodo')
            }
            
        }
    },
}
</script>

<style>
    .todo-footer{
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }
    .todo-footer label{
        display :inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    todo-footer label input{
        position: relative;
        top:-1px;
        vertical-align: middle;
        margin-right: 5px;
    }
    button{
        float: right;
        /* margin-top: 3px; */
    }
</style>